<!--
 * @Description: 
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2021-12-11 13:41:01
 * @LastEditors: zhj1214
 * @LastEditTime: 2022-01-14 10:13:41
-->
<template>
  <div style="display: flex">
    <!-- 左边菜单展示 -->
    <div class="leftView flex-column">
      <div class="header flex-center" style="justify-content: space-between">
        <div class="leftView-title">菜单列表</div>
        <div class="flex-center">
          <div class="btn" @click="addMenu">新建菜单</div>
          <div class="btn" @click="editMenu">编辑</div>
          <div class="btn" @click="menuDelete">删除</div>
        </div>
      </div>
      <n-tree
        block-line
        :data="data"
        :default-expanded-keys="defaultExpandedKeys"
        selectable
        @update:selected-keys="selectedKeys"
      />
    </div>
    <!-- 右边的内容 -->
    <div class="rightView">
      <div class="header flex-center" style="justify-content: space-between">
        <div class="rightView-title">路由信息</div>
      </div>

      <div>
        <n-space vertical>
          <n-form
            :model="form"
            ref="formRef"
            label-placement="left"
            :label-width="160"
            :rules="rules"
            :disabled="updateDisabled"
            :style="{
              maxWidth: '95%',
            }"
          >
            <n-form-item label="路由Name:" path="name">
              <n-input
                placeholder="name必须唯一，且与父级相关联，如：当前菜单1-2-3，新增二级菜单，则输入2-x，三级菜单：则输入3-x"
                v-model:value="form.name"
              />
            </n-form-item>
            <n-form-item label="路由Title:" path="title">
              <n-input placeholder="路由的Title" v-model:value="form.title" />
            </n-form-item>
            <n-form-item label="路由Component:" path="component">
              <n-input
                placeholder="请输入constantRouterComponents中的字段,或者RouteView，没有则无法展示页面，一级菜单默认为RouteView"
                v-model:value="form.component"
              />
            </n-form-item>
            <n-form-item label="路由Redirect:" path="redirect">
              <n-input placeholder="请输入重定向path,可选" v-model:value="form.redirect" />
            </n-form-item>
            <n-form-item label="是否在菜单中显示:" path="switchValue">
              <n-switch v-model:value="form.switchValue" />
            </n-form-item>
          </n-form>
          <!-- 按钮权限 -->
          <div class="flex-center" style="padding: 0 40px">
            <div style="width: 100px">按钮权限：</div>
            <n-select v-model:value="btns" multiple :options="btnPermissionArr" />
          </div>
        </n-space>
        <div>
          <div class="btn-commit" @click="commitDataMenu">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { NTree, NForm, NFormItem, NInput, NSwitch, NSelect } from "naive-ui";
import local from "store";
import { useState } from "@store/hock/useProperty";
import useMethod from "@store/hock/useMethod";
import { MENU_KEYS } from "@utils/constant.js";

/**
 * @description: 构造tree的加载数据
 * @param {*} arr
 * @param {*} paraentName
 * @author: zhj1214
 */
function createListData(arr, paraentName = "") {
  const subs = [];
  arr.forEach(rout => {
    if (rout.children && rout.children.length > 0) {
      var children = createListData(rout.children, rout.name) || [];
    }
    if (rout.redirect === "null" || rout.redirect === null || !rout.redirect) rout.redirect = "";
    subs.push({
      ...rout,
      key: `${paraentName}${paraentName ? "-" : ""}${rout.name}`,
      label: rout.meta.title || "标题",
      children,
    });
  });
  return subs;
}

export default defineComponent({
  components: {
    NTree,
    NForm,
    NFormItem,
    NInput,
    NSwitch,
    NSelect,
  },
  setup() {
    const state = useState("permission", ["addRouters"]);
    const [actions] = useMethod("permission", ["addRouteMenu", "updateRouteMenu", "deleteRouteMenu"]);
    console.log("原始路由列表", state.addRouters.value);
    const routers = createListData(state.addRouters.value);
    console.log("路由信息加工后：", routers);

    // 初始化当前选中的节点
    let selectMenu = reactive({});
    const saveMenuStatus = ref(""); // 当前的状态：新增、编辑、删除
    // 初始化表单数据
    const model = ref({
      name: null,
      title: null,
      component: null,
      redirect: null,
      switchValue: true,
    });
    const updateDisabled = ref(true); // 是否禁用表单
    // 点击tree时
    const selectedKeys = (keys, arr) => {
      console.log("我点击了谁", keys, "----", arr);
      //
      selectMenu = arr[0];
      model.value.name = arr[0].key;
      model.value.title = arr[0].label;
      model.value.component = arr[0].component.name;
      model.value.show = true;
      model.value.redirect = arr[0].parentId === "0" ? arr[0].redirect : "";
      updateDisabled.value = true;
    };

    /**
     * @description: 新增菜单
     * @author: zhj1214
     */

    const getLocalMenu = key => {
      if (selectMenu && !selectMenu.name) {
        return $message.error("请先选择要操作的树节点");
      }
      return local.get(key || "") || [];
    };

    const addMenu = () => {
      const arr = getLocalMenu(MENU_KEYS.ADD);
      if (arr.length === undefined) return;
      // 重置表单的值
      model.value = {
        name: null,
        title: null,
        component: null,
        redirect: null,
        switchValue: true,
      };
      updateDisabled.value = false;
      saveMenuStatus.value = "add";
    };

    const editMenu = () => {
      const arr = getLocalMenu(MENU_KEYS.EDIT);
      if (arr.length === undefined) return;
      updateDisabled.value = false;
      saveMenuStatus.value = "edit";
    };

    const menuDelete = () => {
      const arr = getLocalMenu(MENU_KEYS.DELETE);
      // 提示
      $dialog.warning({
        title: "警告",
        content: "你确定删除这个路由吗？",
        positiveText: "确定",
        negativeText: "取消",
        onPositiveClick: () => {
          saveMenuStatus.value = "delete";
          //   请求网络
          actions
            .deleteRouteMenu(selectMenu)
            .then(() => {
              window.location.reload();
              $message.success("删除成功");
            })
            .catch(() => {
              arr.push(selectMenu);
              local.set(MENU_KEYS.DELETE, arr);
              window.location.reload();
            });
        },
        onNegativeClick: () => {
          $message.error("取消");
        },
      });
    };
    // 表单提交
    const formRef = ref(null);
    const commitDataMenu = () => {
      formRef.value.validate(errors => {
        if (!errors) {
          //   校验name
          const leve = selectMenu.key.split("-").length;
          if ((leve > 1 && !model.value.name.includes("-")) || (leve <= 1 && model.value.name.includes("-"))) {
            $message.success("请确认路由name是否正确");
          }
          //  生成parentId
          const curLeveArr = model.value.name.split("-"); // 级别
          let subsId = `${selectMenu.id}10`;
          if (curLeveArr.length - 1 > 0) {
            const num = selectMenu.children ? selectMenu.children.length : 0;
            subsId = `${selectMenu.id || ""}${num + 1}`;
          }
          if (saveMenuStatus.value === "add") {
            const arr = getLocalMenu(MENU_KEYS.ADD);
            const param = {
              name: curLeveArr.length === 1 ? model.value.name : curLeveArr[curLeveArr.length - 1],
              parentId: selectMenu.id || 0,
              id: subsId,
              meta: {
                icon: "dashboard",
                title: model.value.title,
                show: model.value.switchValue,
              },
              component: curLeveArr.length === 1 ? "RouteView" : model.value.component,
              redirect: model.value.redirect || "",
            };
            arr.push(param);

            //   请求网络
            actions
              .addRouteMenu(param)
              .then(() => {
                $message.success("新增成功");
                window.location.reload();
              })
              .catch(() => {
                //   保存到本地,等待下一次有网络的时候更新
                local.set(MENU_KEYS.ADD, arr);
                window.location.reload();
              });
          } else if (saveMenuStatus.value === "edit") {
            const param = {
              id: selectMenu.id,
              parentId: selectMenu.parentId,
              name: curLeveArr.length === 1 ? model.value.name : curLeveArr[curLeveArr.length - 1],
              meta: {
                icon: "dashboard",
                title: model.value.title,
                show: model.value.switchValue,
              },
              component: curLeveArr.length === 1 ? "RouteView" : model.value.component,
              redirect: model.value.redirect || null,
            };
            let arr = getLocalMenu(MENU_KEYS.EDIT);
            // id重复直接替换
            let isHas = false;
            arr = arr.map(item => {
              if (item.id === param.id) {
                isHas = true;
                return param;
              }
              return item;
            });
            if (!isHas) arr.push(param);

            //   请求网络
            actions
              .updateRouteMenu(param)
              .then(() => {
                window.location.reload();
              })
              .catch(() => {
                //   保存到本地,等待下一次有网络的时候更新
                local.set(MENU_KEYS.EDIT, arr);
                window.location.reload();
              });
          }
        } else {
          console.log(errors);
          $message.error("路由信息填写错误");
        }
      });
    };

    return {
      btns: ref(["add"]),
      btnPermissionArr: [
        {
          label: "新增",
          value: "add",
          disabled: true,
        },
        {
          label: "编辑",
          value: "edit",
        },
        {
          label: "删除",
          value: "remove",
        },
        {
          label: "查阅",
          value: "Check",
        },
        {
          label: "详情",
          value: "detail",
        },
      ],
      saveMenuStatus,
      formRef,
      selectMenu,
      data: routers,
      defaultExpandedKeys: ref(["index"]),
      selectedKeys,
      //   表单
      updateDisabled, // 是否禁用表单
      form: model,
      rules: {
        name: {
          required: true,
          message: "请输入路由名称",
          trigger: ["input", "blur"],
        },
        title: {
          required: true,
          message: "请输入菜单标题",
          trigger: ["input", "blur"],
        },
        component: {
          required: true,
          message: "请输入组件名称",
          trigger: ["input", "blur"],
        },
      },
      commitDataMenu,
      addMenu,
      editMenu,
      menuDelete,
    };
  },
});
</script>

<style lang="scss" scoped>
.header {
  padding: 12px 24px;
}
.btn {
  padding: 6px 10px;
  margin-left: 10px;
  border: 0.5px solid #8b8b8b;
  &-commit {
    background-color: blue;
    border-radius: 6px;
    width: 80px;
    padding: 10px 0;
    margin: 24px;
    text-align: center;
    color: #fff;
  }
}
.leftView {
  width: 45%;
  &-title {
    font-size: 22px;
    font-weight: 900;
  }
}
.rightView {
  width: 55%;
  border-left: 1px solid red;
  &-title {
    font-size: 22px;
    font-weight: 900;
  }
}
</style>
